<script setup>

import {onMounted, reactive, ref} from "vue";
import {RULE} from "../../../const/index.js";
import {ElMessage} from "element-plus";
import router from "../../../router/index.js";
import MyNav from "../../../components/MyNav.vue";
import MyForm from "../../../components/MyForm.vue";
import {listApi, updateApi} from "../../../api/axios.js";
import {getResponseData} from "../../../request/index.js";

// 班级进度记录
let clubProgress = JSON.parse(sessionStorage.getItem('row'));

// 班级下拉菜单
let clubOptions = ref([]);
// 课程下拉菜单
let courseOptions = ref([]);
// 房间下拉菜单
let roomOptions = ref([]);
// 主讲老师下拉菜单
let teacherOptions = ref([]);
// 班主任老师下拉菜单
let managerOptions = ref([]);
// 助教老师下拉菜单
let assistantOptions = ref([]);

// 路径导航
const navItems = [
  {icon: 'Platform', label: '班级管理', url: '/ClubProgress'},
  {icon: 'More', label: '班级进度列表', url: '/ClubProgress'},
  {icon: 'Edit', label: '修改班级进度'},
];


// 表单项 + 表单值 + 表单规则
let items = ref([
  {label: '班级排序', prop: 'idx', type: 'number', span: 12, required: true},
  {span: 12, hidden: true},
  {label: '班级', prop: 'fkClubId', span: 12, type: 'select', options: clubOptions.value, required: true},
  {label: '课程', prop: 'fkCourseId', span: 12, type: 'select', options: courseOptions.value, required: true},
  {label: '房间', prop: 'fkRoomId', span: 12, type: 'select', options: roomOptions.value, required: true},
  {label: '主讲老师', prop: 'fkTeacherId', span: 12, type: 'select', options: teacherOptions.value, required: true},
  {label: '班主任老师', prop: 'fkManagerId', span: 12, type: 'select', options: managerOptions.value, required: true},
  {label: '助教老师', prop: 'fkAssistantId', span: 12, type: 'select', options: assistantOptions.value, required: true},
  {label: '进度开始时间', prop: 'startTime', span: 12, type: 'datetime', required: true},
  {label: '预计结束时间', prop: 'expectedEndTime', span: 12, type: 'datetime', required: true},
  {label: '进度描述', prop: 'info', type: 'textarea'},
]);
let params = reactive(clubProgress);
let rules = {info: RULE.INFO};

/* ======================================== 修改成功后 ================================================ */

function updateSuccess() {
  ElMessage.success('修改记录成功');
  setTimeout(() => router.push('/ClubProgress'), 1000);
}

/* ======================================== 加载函数 ================================================ */

onMounted(async () => {
  // 查询全部班级，并添加到下拉菜单中
  Object.values(getResponseData(await listApi({module: 'club'}))).forEach(club => {
    clubOptions.value.push({label: club['title'], value: club['id']});
  });
  // 查询全部课程，并添加到下拉菜单中
  Object.values(getResponseData(await listApi({module: 'course'}))).forEach(course => {
    courseOptions.value.push({label: course['title'], value: course['id']});
  });
  // 查询全部房间，并添加到下拉菜单中
  Object.values(getResponseData(await listApi({module: 'room'}))).forEach(room => {
    roomOptions.value.push({label: room['title'], value: room['id']});
  });
  // 查询全部主讲老师，并添加到下拉菜单中
  Object.values(getResponseData(await listApi({module: 'emp'}))).forEach(emp => {
    teacherOptions.value.push({label: emp['realname'], value: emp['id']});
  });
  // 查询全部班主任老师，并添加到下拉菜单中
  Object.values(getResponseData(await listApi({module: 'emp'}))).forEach(emp => {
    managerOptions.value.push({label: emp['realname'], value: emp['id']});
  });
  // 查询全部助教老师，并添加到下拉菜单中
  Object.values(getResponseData(await listApi({module: 'emp'}))).forEach(emp => {
    assistantOptions.value.push({label: emp['realname'], value: emp['id']});
  });

});
</script>

<template>
  <my-nav :items="navItems"/>
  <el-card class="clubProgress-update-card" header="修改班级进度信息">
    <my-form type="update"
             :items="items"
             :params="params"
             :rules="rules"
             :api="updateApi"
             :args="{module: 'clubProgress'}"
             :callback="updateSuccess"/>
  </el-card>
</template>

<style scoped lang="scss">
 .clubProgress-update-card {
   width: 60%; /// 宽度
   margin: 65px auto 0; // 外边距
 }
</style>